<template>
    <ContentWrap>
        <CardTitle title="EChart 使用" />
        <code class="code-block mt-20px" >
            &lt;EChart :options="chartOptions" width="400px" height="300px" /&gt;<br/>
            &lt;EChart :options="barOptions" :loading="loading" /&gt;
        </code>
        <CardTitle title="EChart 代码示例" />
        <pre class="code-block">
            <code>
&lt;script setup lang="ts"&gt;
import { ref } from 'vue'

const loading = ref(false)

const chartOptions = ref({
  title: {
    text: '示例图表'
  },
  tooltip: {},
  xAxis: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {},
  series: [{
    name: '销量',
    type: 'line',
    data: [120, 200, 150, 80, 70, 110, 130]
  }]
})

&lt;/script&gt;
            </code>
        </pre>
        <CardTitle title="EChart 属性" />
        <table class="properties-table mt-20px">
            <thead>
                <tr>
                    <th>属性</th>
                    <th>类型</th>
                    <th>默认值</th> 
                    <th>说明</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>options</td> 
                    <td>Object</td>
                    <td>-</td>
                    <td>ECharts 配置项</td>
                </tr>
                <tr>
                    <td>width</td>
                    <td>String</td>
                    <td>100%</td>
                    <td>图表宽度</td>
                </tr>
                <tr>
                    <td>height</td>
                    <td>String</td>
                    <td>400px</td>
                    <td>图表高度</td>
                </tr>
                <tr>
                    <td>loading</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td>是否显示加载中</td>
                </tr>
            </tbody>
        </table>
        <CardTitle title="EChart 示例" />
       <div class="mt-20px">
            <div class="chart-grid">
                <div class="chart-item">
                    <h4>折线图示例</h4>
                    <EChart :options="lineOptions" width="100%" height="300px" />
                </div>
                
                <div class="chart-item">
                    <h4>柱状图示例</h4>
                    <EChart :options="barOptions" width="100%" height="300px" />
                </div>
                
                <div class="chart-item">
                    <h4>饼图示例</h4>
                    <EChart :options="pieOptions" width="100%" height="300px" />
                </div>
                
                <div class="chart-item">
                    <h4>加载状态示例</h4>
                    <EChart :options="loadingOptions" :loading="loading" width="100%" height="300px" />
                    <EButton @click="toggleLoading" class="mt-10px">{{ loading ? '停止加载' : '开始加载' }}</EButton>
                </div>
            </div>
       </div>
    </ContentWrap>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const loading = ref(false)

const lineOptions = ref({
  title: {
    text: '折线图示例'
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    name: '销量',
    type: 'line',
    data: [120, 200, 150, 80, 70, 110, 130],
    smooth: true
  }]
})

const barOptions = ref({
  title: {
    text: '柱状图示例'
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: ['产品A', '产品B', '产品C', '产品D', '产品E']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    name: '销量',
    type: 'bar',
    data: [320, 240, 160, 180, 280],
    itemStyle: {
      color: '#409EFF'
    }
  }]
})

const pieOptions = ref({
  title: {
    text: '饼图示例',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  series: [{
    name: '访问来源',
    type: 'pie',
    radius: '70%',
    data: [
      { value: 1048, name: '搜索引擎' },
      { value: 735, name: '直接访问' },
      { value: 580, name: '邮件营销' },
      { value: 484, name: '联盟广告' },
      { value: 300, name: '视频广告' }
    ],
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    }
  }]
})

const loadingOptions = ref({
  title: {
    text: '数据加载示例'
  },
  tooltip: {},
  xAxis: {
    data: ['A', 'B', 'C', 'D', 'E']
  },
  yAxis: {},
  series: [{
    name: '数据',
    type: 'bar',
    data: [10, 20, 30, 40, 50]
  }]
})

const toggleLoading = () => {
  loading.value = !loading.value
}
</script>

<style lang="scss" scoped>
.chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;

    .chart-item {
        border: 1px solid #eee;
        border-radius: 6px;
        padding: 20px;
        background: #fafafa;
        
        h4 {
            margin: 0 0 15px 0;
            color: #333;
            font-size: 16px;
        }
    }
}
</style> 